<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <script src="/static/common/js/ui.js"></script>
</head>

<body>
<div id="loading" class="loading-wrap">
    <div class="loading-content">
        <div class="loading-round"></div>
        <div class="loading-dot"></div>
    </div>
</div>
<script id="tmpl1" type="text/x-jquery-tmpl">

<div id='layout' data-toggle="cubeui-layout" data-options="fit:true">
    <div data-options="region:'center',title:'',split:false,collapsible:false,border:true,width:1000,iconCls:'fa fa-user-circle-o',
    headerCls:'border_right',bodyCls:'border_right'">

        <table id="servicesDg"></table>
        <!-- 表格工具栏开始 -->
        <div id="servicesDg-toolbar" class="cubeui-toolbar"
             data-options="grid:{
                   type:'datagrid',
                   id:'servicesDg'
               }">

            <a  href="javascript:void(0)" data-toggle='cubeui-menubutton' data-options="{
                    method1: 'openDialog',
                    onClick:function(){
                        createService();
                    },
                    extend: '#servicesDg-toolbar',
                    btnCls: 'cubeui-btn-blue',
                    iconCls: 'fa fa-plus'
                }">创建服务</a>

            <a  href="javascript:void(0)" data-toggle='cubeui-menubutton' data-options="{
                onClick:function(){
                    updateTags();
                },
                btnCls: 'cubeui-btn-slateblue',
                iconCls: 'fa fa-tags'
            }">编辑元数据</a>

            <a  href="javascript:void(0)" data-toggle='cubeui-menubutton' data-options="{
                onClick:function(){
                    updateImage();
                },
                btnCls: 'cubeui-btn-orange',
                iconCls: 'fa fa-headphones'
            }">升级镜像</a>

            <a  href="javascript:void(0)" data-toggle='cubeui-menubutton' data-options="{
                    onClick:function(){
                        removeLease();
                    },
                    extend: '#servicesDg-toolbar',
                    btnCls: 'cubeui-btn-red',
                    iconCls: 'fa fa-times'
                }">删除服务</a>

            <form id="queryForm" class="search-box">

                <span style='line-height: 30px;padding-right:0px' title="">模式：</span>
                <input type="text" name="mode" value="" data-toggle="cubeui-combobox"
                       data-options="
                                width:160,
                                required:false,prompt:'为空，查询所有',
                                valueField:'KEY',
                                textField:'TEXT',
                                data:[{'KEY':'','TEXT':'所有'},{'KEY':'replicated','TEXT':'replicated'},{'KEY':'global','TEXT':'global'}]
                       ">

                <span style='line-height: 30px;padding-left:2px;padding-right:10px'></span>

                <input type="text" id='search_type' name="search_type" value="name" data-toggle="cubeui-combobox"
                       data-options="
                                width:120,
                                required:true,prompt:'查询方式，必须填写',
                                valueField:'KEY',
                                textField:'TEXT',
                                data:[{'KEY':'name','TEXT':'Name'},{'KEY':'label','TEXT':'Label'},
                                {'KEY':'id','TEXT':'ID'}]
                       ">
                <input type="text" id='search_key' name="search_key" data-toggle="cubeui-textbox"
                       data-options="onClear:function(){
                            $('#searchbtn').trigger('click');
                       }, mask:'{{:~js(prefix)}}', prompt:'查询条件, 多条件逗号分隔；label方式 label1=a,label2=b',width:420">
                <a href="javascript:void(0)" id="searchbtn"
                   data-toggle="cubeui-menubutton"
                   data-options="method:'query',
                   iconCls:'fa fa-search',
                   btnCls:'cubeui-btn-blue',
                   form:{id:'queryForm'},
                   grid:{type:'datagrid','id':'servicesDg'}">查询</a>
            </form>
        </div>
    </div>
</div>
<!-- 表格工具栏结束 -->
<div id="searchImageMm" data-toggle="cubeui-menu" style="width:120px;display:none" data-options="">
    <div onclick="pullImgFromMenu()" data-options="iconCls:'fa fa-download'">拉取latest镜像</div>
    <div onclick="setImgFromMenu()" data-options="iconCls:'fa fa-check-square-o'">指定镜像Tag</div>
</div>
</script>

</body>
<script>
    new APP(function () {
        return {
            css: [],
            js: [
                ROOT_RES_URL + "/api/api.js",
                ROOT_RES_URL + "/api/title.js",
                ROOT_RES_URL + "/service/service.js",
                ROOT_RES_URL + "/service/tpl.js",
                ROOT_RES_URL + "/logs/logs.js",
            ],
            render: function () {
                stop = true
                console.log("finish")

                console.log(getTriggerParams());

                APP.renderBody("#tmpl1", {})
                refreshImageAndContainerInfo()

                // let t = $.templates("#tmpl1").render({id:"1022", name:"davidliu"})
                // $('body div').remove()
                // $(t).appendTo($('body'))
            }
        }
    });


    APP.fn(function(){
        loadLease();
    })
</script>
</html>